import React, { Component } from 'react'
import { Table, Card, Button,Form,Modal,message } from 'antd';
import axios from '../../axios';
import BaseForm from '../../components/BaseForm'
export default class Order extends Component {
    state={
        columns:[
            {
                title:'订单编号',
                dataIndex:'order_sn'
            },
            {
                title: '车辆编号',
                dataIndex: 'bike_sn'
            },
            {
                title: '用户名',
                dataIndex: 'user_name'
            },
            {
                title: '手机号',
                dataIndex: 'mobile'
            },
            {
                title: '里程',
                dataIndex: 'distance',
                render(distance){
                    return distance/1000 + 'Km';
                }
            },
            {
                title: '行驶时长',
                dataIndex: 'total_time'
            },
            {
                title: '状态',
                dataIndex: 'status'
            },
            {
                title: '开始时间',
                dataIndex: 'start_time'
            },
            {
                title: '结束时间',
                dataIndex: 'end_time'
            },
            {
                title: '订单金额',
                dataIndex: 'total_fee'
            },
            {
                title: '实付金额',
                dataIndex: 'user_pay'
            }
        ],
        page:1,
        list:[],
        orderInfo:{},
        orderConfirmVisble:false,
    }
    formList=[
        {
            type:'SELECT',
            label:'城市',
            field:'city',
            placeholder:'全部',
            initiaValue:'1',
            width:100,
            list:[
                {id:'0',name:'全部'},
                {id:'1',name:'北京'},
                {id:'2',name:'天津'},
                {id:'3',name:'深圳'}
            ]
        },
        {
            type:'时间查询'
        },
        {
            type:'SELECT',
            label:'订单状态',
            field:'status',
            placeholder:'全部',
            initiaValue:'1',
            width:100,
            list:[
                {id:'0',name:'全部'},
                {id:'1',name:'进行中'},
                {id:'2',name:'结束行程'}
            ]
        },

    ]
    requestList=()=>{
        let _this = this;
        axios.requestList(_this,'/order/list',_this.params);
        // axios.ajax({
        //     url: '/order/list',
        //     data:{
        //         params:{
        //             page:this.state.page
        //         }
        //     }
        // }).then((res)=>{
        //     let list = res.data.result.item_list.map((item, index) => {
        //         item.key = index;
        //         return item;
        //     });
        //     this.setState({
        //         list:list
        //     })
        // })
    }
    componentDidMount(){
        this.requestList();
    }
    handleConfirm = ()=>{
        let item = this.state.selectedItem;
        if (!item) {
            Modal.info({
                title: '信息',
                content: '请选择一条订单进行结束'
            })
            return;
        }
        axios.ajax({
            url:'/order/ebike_info',
            data:{
                params:{
                    orderId: item.id
                }
            }
        }).then((res)=>{
            if(res.data.code==='200'){
                this.setState({
                    orderInfo:res.data.result,
                    orderConfirmVisble: true
                })
            }
        })
    }
    // 结束订单"ok""
    handleFinishOrder = ()=>{
        let item = this.state.selectedItem;
        axios.ajax({
            url: '/order/finish_order',
            data: {
                params: {
                    orderId: item.id
                }
            }
        }).then((res) => {
            if (res.data.code === '200') {
                message.success('订单结束成功');
                this.setState({
                    orderConfirmVisble: false
                })
                this.requestList();
            }
        })
    }
    onRowClick = (record,index)=>{
        let selectKey = [index];
        this.setState({
            selectedRowKeys:selectKey,
            selectedItem:record
        })
    }
    openOrderDetail=()=>{
        let item = this.state.selectedItem;
        if (!item) {
            Modal.info({
                title: '信息',
                content: '请先选择一条订单'
            })
            return;
        }
        window.open(`/#/common/order/detail/${item.id}`,'_blank');
    }

    handleFilter = (params) =>{
        // this.params = params;
        // this.requestList();
    }
    render() {
        const formItemLayout = {
            labelCol:{span:3},
            wrapperCol:{span:19}
        }
        const selectedRowKeys = this.state.selectedRowKeys;
        const rowSelection = {
            type:'radio',
            selectedRowKeys
        }
        return (
            <div className="card-content">
                <Card>
                    <BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
                </Card>
                <Card style={{marginTop:10}}>
                    <Button type="primary" onClick={this.openOrderDetail}>订单详情</Button>
                    <Button type="primary" style={{marginLeft:'10px'}} onClick={this.handleConfirm}>结束订单</Button>
                </Card>
                <div>
                    <Table 
                        columns={this.state.columns} 
                        dataSource={this.state.list} 
                        bordered 
                        pagination={true}
                        rowSelection={rowSelection}
                        onRow={(record,index)=>{
                            return {
                                onClick:()=>{
                                    this.onRowClick(record,index);
                                }
                            }
                        }}

                    />
                </div>
                <Modal
                    title="结束订单"
                    visible={this.state.orderConfirmVisble}
                    onCancel={()=>{
                        this.setState({
                            orderConfirmVisble:false
                        })
                    }}
                    onOk={this.handleFinishOrder}
                    width={600}
                >
                    <Form layout="horizontal">
                        <Form.Item label="车辆编号" {...formItemLayout}>
                            {this.state.orderInfo.bike_sn}
                        </Form.Item>
                        <Form.Item label="剩余电量" {...formItemLayout}>
                            {this.state.orderInfo.battery + '%'}
                        </Form.Item>
                        <Form.Item label="开始时间" {...formItemLayout}>
                            {this.state.orderInfo.start_time}
                        </Form.Item>
                        <Form.Item label="当前位置" {...formItemLayout}>
                            {this.state.orderInfo.location}
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
// class FilterForm extends Component{

//     render(){
//         return (
//             <Form layout="inline">
//                 <Form.Item label="城市">
//                             <Select
//                                 style={{width:100}}
//                                 placeholder="全部"
//                             >
//                                 <Option value="">全部</Option>
//                                 <Option value="1">北京市</Option>
//                                 <Option value="2">天津市</Option>
//                                 <Option value="3">深圳市</Option>
//                             </Select>
//                 </Form.Item>
//                 <Form.Item label="订单时间">
//                     <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" name="start_time"/>
//                     <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" name="end_time" style={{marginLeft:'15px'}}/>
//                 </Form.Item>
//                 <Form.Item label="订单状态">
//                             <Select
//                                 style={{ width: 100 }}
//                                 placeholder="全部"
//                             >
//                                 <Option value="">全部</Option>
//                                 <Option value="1">进行中</Option>
//                                 <Option value="2">结束行程</Option>
//                             </Select>
//                 </Form.Item>
//                 <Form.Item>
//                     <Button type="primary" style={{margin:'0 20px'}}>查询</Button>
//                     <Button>重置</Button>
//                 </Form.Item>
//             </Form>
//         );
//     }
// }
